import React, { useState } from 'react'
import Display from "./Display";
import ButtonPanel from "./ButtonPanel";
import calculate from "../logic/calculate";
import './App.css'
export default function App() {
  const [total, setTotal] = useState(null)
  const [next, setNext] = useState(null)
  const [operation, setOperation] = useState(null)

  const stateItem = {
    total,
    next,
    operation,
  }
  const handleClick = buttonName => {
    const n = calculate(stateItem, buttonName)
    const newItem = { ...stateItem, ...n }
    setTotal(newItem.total)
    setNext(newItem.next)
    setOperation(newItem.operation)
    console.log(stateItem,buttonName,newItem)
  }

  return (
    <div className="component-app">
      <Display value={next || total || "0"} />
      <ButtonPanel clickHandler={handleClick} />
    </div>
  )
}
